<div id="pma_console_container" class="d-print-none">
  <div id="pma_console">
    <div class="toolbar collapsed">
      <div class="switch_button console_switch">
        {{ get_image('console', 'SQL Query Console'|trans) }}
        <span>{{ 'Console'|trans }}</span>
      </div>
      <div class="button clear">
        <span>{{ 'Clear'|trans }}</span>
      </div>
      <div class="button history">
        <span>{{ 'History'|trans }}</span>
      </div>
      <div class="button options">
        <span>{{ 'Options'|trans }}</span>
      </div>
      {% if has_bookmark_feature %}
        <div class="button bookmarks">
          <span>{{ 'Bookmarks'|trans }}</span>
        </div>
      {% endif %}
      <div class="button debug hide">
        <span>{{ 'Debug SQL'|trans }}</span>
      </div>
    </div>

    {# Console messages #}
    <div class="content">
      <div class="console_message_container">
        <div class="message welcome">
          <span id="instructions-0">{% trans 'Press Ctrl+Enter to execute query' %}</span>
          <span class="hide" id="instructions-1">{% trans 'Press Enter to execute query' %}</span>
        </div>
        {% if sql_history is not empty %}
          {% for record in sql_history|reverse %}
            <div class="message history collapsed hide{{ record['sqlquery'] matches '@^SELECT[[:space:]]+@i' ? ' select' }}" targetdb="{{ record['db'] }}" targettable="{{ record['table'] }}">
              <div class="action_content">
                <span class="action collapse">{{ 'Collapse'|trans }}</span>
                <span class="action expand">{{ 'Expand'|trans }}</span>
                <span class="action requery">{{ 'Requery'|trans }}</span>
                <span class="action edit">{{ 'Edit'|trans }}</span>
                <span class="action explain">{{ 'Explain'|trans }}</span>
                <span class="action profiling">{{ 'Profiling'|trans }}</span>
                {% if has_bookmark_feature %}
                  <span class="action bookmark">{{ 'Bookmark'|trans }}</span>
                {% endif %}
                <span class="text failed">{{ 'Query failed'|trans }}</span>
                <span class="text targetdb">{{ 'Database'|trans }}: <span>{{ record['db'] }}</span></span>
                <span class="text query_time">{{ 'Queried time'|trans }}: <span>{{ record['timevalue'] is defined ? record['timevalue'] : 'During current session'|trans }}</span></span>
              </div>

              <span class="query">{{ record['sqlquery'] }}</span>
            </div>
          {% endfor %}
        {% endif %}
      </div><!-- console_message_container -->
      <div class="query_input">
        <span class="console_query_input"></span>
      </div>
    </div><!-- message end -->
    {# Drak the console with other cards over it #}
    <div class="mid_layer"></div>
    {# Debug SQL card #}
    <div class="card" id="debug_console">
      <div class="toolbar">
        <div class="button order order_asc">
          <span>{{ 'ascending'|trans }}</span>
        </div>
        <div class="button order order_desc">
          <span>{{ 'descending'|trans }}</span>
        </div>
        <div class="text">
          <span>{{ 'Order:'|trans }}</span>
        </div>
        <div class="switch_button">
          <span>{{ 'Debug SQL'|trans }}</span>
        </div>
        <div class="button order_by sort_count">
          <span>{{ 'Count'|trans }}</span>
        </div>
        <div class="button order_by sort_exec">
          <span>{{ 'Execution order'|trans }}</span>
        </div>
        <div class="button order_by sort_time">
          <span>{{ 'Time taken'|trans }}</span>
        </div>
        <div class="text">
          <span>{{ 'Order by:'|trans }}</span>
        </div>
        <div class="button group_queries">
          <span>{{ 'Group queries'|trans }}</span>
        </div>
        <div class="button ungroup_queries">
          <span>{{ 'Ungroup queries'|trans }}</span>
        </div>
      </div>

      <div class="content debug">
        <div class="message welcome"></div>
        <div class="debugLog"></div>
      </div> <!-- Content -->
      <div class="templates">
        <div class="debug_query action_content">
          <span class="action collapse">{{ 'Collapse'|trans }}</span>
          <span class="action expand">{{ 'Expand'|trans }}</span>
          <span class="action dbg_show_trace">{{ 'Show trace'|trans }}</span>
          <span class="action dbg_hide_trace">{{ 'Hide trace'|trans }}</span>
          <span class="text count hide">{{ 'Count:'|trans }} <span></span></span>
          <span class="text time">{{ 'Time taken:'|trans }} <span></span></span>
        </div>

      </div> <!-- Template -->
    </div> <!-- Debug SQL card -->
    {% if has_bookmark_feature %}
      <div class="card" id="pma_bookmarks">
        <div class="toolbar">
          <div class="switch_button">
            <span>{{ 'Bookmarks'|trans }}</span>
          </div>
          <div class="button refresh">
            <span>{{ 'Refresh'|trans }}</span>
          </div>
          <div class="button add">
            <span>{{ 'Add'|trans }}</span>
          </div>
        </div>

        <div class="content bookmark">
          {{ bookmark_content|raw }}
        </div>
        <div class="mid_layer"></div>
        <div class="card add">
          <div class="toolbar">
            <div class="switch_button">
              <span>{{ 'Add bookmark'|trans }}</span>
            </div>
          </div>

          <div class="content add_bookmark">
            <div class="options">
              <label>
                {% trans 'Label' %}: <input type="text" name="label">
              </label>
              <label>
                {% trans 'Target database' %}: <input type="text" name="targetdb">
              </label>
              <label>
                <input type="checkbox" name="shared">{% trans 'Share this bookmark' %}
              </label>
              <button class="btn btn-primary" type="submit" name="submit">{% trans 'OK' %}</button>
            </div> <!-- options -->
            <div class="query_input">
              <span class="bookmark_add_input"></span>
            </div>
          </div>
        </div> <!-- Add bookmark card -->
      </div> <!-- Bookmarks card -->
    {% endif %}
    {# Options card #}
    <div class="card" id="pma_console_options">
      <div class="toolbar">
        <div class="switch_button">
          <span>{{ 'Options'|trans }}</span>
        </div>
        <div class="button default">
          <span>{{ 'Set default'|trans }}</span>
        </div>
      </div>

      <div class="content">
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsAlwaysExpandCheckbox" name="always_expand">
          <label class="form-check-label" for="consoleOptionsAlwaysExpandCheckbox">{{ 'Always expand query messages'|trans }}</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsStartHistoryCheckbox" name="start_history">
          <label class="form-check-label" for="consoleOptionsStartHistoryCheckbox">{{ 'Show query history at start'|trans }}</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsCurrentQueryCheckbox" name="current_query">
          <label class="form-check-label" for="consoleOptionsCurrentQueryCheckbox">{{ 'Show current browsing query'|trans }}</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsEnterExecutesCheckbox" name="enter_executes">
          <label class="form-check-label" for="consoleOptionsEnterExecutesCheckbox">{{ 'Execute queries on Enter and insert new line with Shift+Enter. To make this permanent, view settings.'|trans }}</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsDarkThemeCheckbox" name="dark_theme">
          <label class="form-check-label" for="consoleOptionsDarkThemeCheckbox">{{ 'Switch to dark theme'|trans }}</label>
        </div>
      </div>
    </div> <!-- Options card -->
    <div class="templates">
      {# Templates for console message actions #}
      <div class="query_actions">
        <span class="action collapse">{{ 'Collapse'|trans }}</span>
        <span class="action expand">{{ 'Expand'|trans }}</span>
        <span class="action requery">{{ 'Requery'|trans }}</span>
        <span class="action edit">{{ 'Edit'|trans }}</span>
        <span class="action explain">{{ 'Explain'|trans }}</span>
        <span class="action profiling">{{ 'Profiling'|trans }}</span>
        {% if has_bookmark_feature %}
          <span class="action bookmark">{{ 'Bookmark'|trans }}</span>
        {% endif %}
        <span class="text failed">{{ 'Query failed'|trans }}</span>
        <span class="text targetdb">{{ 'Database'|trans }}: <span></span></span>
        <span class="text query_time">{{ 'Queried time'|trans }}: <span></span></span>
      </div>
    </div>
  </div> <!-- #console end -->
</div> <!-- #console_container end -->
